<template>
  <div class="lineColumnContent">
    <div ref="lineColumnBar" style="width: 900px; height: 500px"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.setZoomBarOption();
  },
  methods: {
    setZoomBarOption() {
      var myChartDom = this.$refs.lineColumnBar;
      var myChart = this.$echarts.init(myChartDom);
      const option = {
        //   color: ['#8996E6','rgba(243, 133, 123, 1)', 'rgba(255, 216, 110, 1)', 'blue', 'green'],
        color: ['blue','green'], // 
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: { 
                    color: '#dddddd',
                    width: 1,
                    type: 'dashed'
                },
                crossStyle: {
                    color: '#000'
                }
            }
        },
        legend: {
            data: [
                {icon: 'rect', name: 'Evaporation'},
                {icon: 'rect', name: 'Precipitation'},
                {icon: 'rect', name: 'three'},
                {icon: 'image://https://profile.csdnimg.cn/F/0/1/3_rudy_zhou', name: 'Temperature'},
                {icon: 'image://https://profile.csdnimg.cn/F/0/1/3_rudy_zhou', name: 'four'},
            ]
            // data: ['Evaporation', 'Precipitation', 'three', 'Temperature', 'four']
        },
        xAxis: [
            {
            type: 'category',
            data: ['常规考点', '封管控考点', '集中医学观察点', '医疗救治点', '考生集中酒店', '考生集中小区', '中高考应急指挥点'],
            axisPointer: {
                type: 'shadow'
            },
             axisTick: { // 刻度
              show: false,
            },
            }
        ],
        yAxis: [
            {
            type: 'value',
            name: 'Y轴名称',
            min: 0,
            max: 250, // 最大值
            interval: 50, // 间隔
            axisLabel: {
                formatter: '{value} ml'  // 刻度
            },
            axisLine: {
              show: false, // 隐藏y轴线
              lineStyle: {
                color: "#006AD6",
              },
            },
            axisTick: { // 刻度
              show: false,
            },
            },
            {
            type: 'value',
            name: '',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
                formatter: ''
            },
            axisLine: {
              show: false, // 隐藏y轴线
              lineStyle: {
                color: "#006AD6",
              },
            },
            axisTick: { // 刻度
              show: false,
            },
            }
        ],
        series: [
            {
            name: 'Evaporation',
            type: 'bar',
            itemStyle: {
                normal: {
                  show: true,
                  color: '#8996E6',
                //   barBorderRadius: 70,
                //   borderWidth: 0,
                //   borderColor: "#333",
                },
              },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' ml';
                }
            },
            data: [
                2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
            },
            {
            name: 'Precipitation',
            type: 'bar',
             itemStyle: {
                normal: {
                  show: true,
                  color: 'rgba(243, 133, 123, 1)',
                //   barBorderRadius: 70,
                //   borderWidth: 0,
                //   borderColor: "#333",
                },
              },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' ml';
                }
            },
            data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
            ]
            },
            {
            name: 'three',
            type: 'bar',
            itemStyle: {
                normal: {
                  show: true,
                  color: 'rgba(255, 216, 110, 1)',
                //   barBorderRadius: 70,
                //   borderWidth: 0,
                //   borderColor: "#333",
                },
              },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' ml';
                }
            },
            data: [
                5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 162.2, 32.6, 20.0, 6.4, 18.8,3.3
            ]
            },
            {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                 show: true,
                  color: 'blue',
              },
            },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' °C';
                }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
            name: 'four',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                show: true,
                  color: 'green',
              },
            },
            tooltip: {
                valueFormatter: function (value) {
                return value + ' °C';
                }
            },
            data: [20.3, 23.4, 23.0, 6.5, 12.0, 6.2, 2.0, 2.2, 3.3, 4.5, 6.3, 10.2 ]
            }
        ]
        };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.lineColumnContent{
  width: 900px;
  margin: 50px auto;
}
</style>